<template>
  <div class="gslt-simpleinfo">
    <div class="simpleinfo-content">
      <div>
        <el-form ref="simpleInfoList" :model="simpleInfoList" label-width="80px">
          <el-form-item label="所属分类：" class="select">
            <el-select
              v-model="simpleInfoList.type.typeCheck1"
              placeholder="请选择一级分类"
              :disabled="disabled"
              @change="typeCheck_one()"
            >
              <el-option
                v-for="item in simpleInfoList.typeCheck1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-show="simpleInfoList.type.typeCheck1"
              v-model="simpleInfoList.type.typeCheck2"
              placeholder="请选择二级分类"
              :disabled="disabled"
              @change="typeCheck_two()"
            >
              <el-option
                v-for="item in simpleInfoList.typeCheck2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-select
              v-show="simpleInfoList.type.typeCheck2"
              v-model="simpleInfoList.type.typeCheck3"
              placeholder="请选择三级分类"
              :disabled="disabled"
              @change="typeCheck_three()"
            >
              <el-option
                v-for="item in simpleInfoList.typeCheck3"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称：">
            <el-input
              v-model="simpleInfoList.name"
              @blur="verificationGoods(simpleInfoList.name)"
            />
          </el-form-item>
          <el-form-item label="商品参数：">
            <div style="color:#838A9D">错误填写宝贝属性，可能会引起宝贝下架或搜索流量减少，影响您的正常销售，请认真准确填写！</div>
            <div class="shop-parameter">
              <div>
                <el-form-item
                  v-for="item in simpleInfoList.shopParameterLeft"
                  :key="item.name"
                  :label="item.name+'：'"
                  prop="pass"
                  label-width="50px"
                >
                  <el-input v-model="item.value" type="text" @blur="sendData()" />
                </el-form-item>
              </div>
              <div>
                <el-form-item
                  v-for="item in simpleInfoList.shopParameterRight"
                  :key="item.name"
                  :label="item.name+'：'"
                  prop="pass"
                  label-width="80px"
                >
                  <el-input v-model="item.value" type="text" @blur="sendData()" />
                </el-form-item>
              </div>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getMdseType, getProperty, getMdsenamerepeat } from '@/api/goods.js';
import { mapGetters } from 'vuex';
export default {
  props: {
    getdata: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      simpleInfoList: {
        type: { typeCheck1: '', typeCheck2: '', typeCheck3: '' },
        typeCheck1: [{ id: '', name: '' }],
        typeCheck2: [{ id: '', name: '' }],
        typeCheck3: [{ id: '', name: '' }],
        name: '',
        shopParameterLeft: [
          { name: '品牌', value: '' },
          { name: '型号', value: '' },
          { name: '产地', value: '' }
        ],
        shopParameterRight: [
          { name: '类别', value: '' },
          { name: '材质', value: '' },
          { name: '使用场景', value: '' }
        ]
      },
      flag: 0,
      name: '',
      nameFlag: false,
      // disabled
      disabled: false
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  watch: {
    getdata() {
      this.simpleInfoList = this.getdata.simpleInfo;
      this.simpleInfoList.typeCheck1 = [{ id: '', name: '' }];
      this.simpleInfoList.typeCheck2 = [{ id: '', name: '' }];
      this.simpleInfoList.typeCheck3 = [{ id: '', name: '' }];
      this.nameFlag = true;
      this.name = this.simpleInfoList.name;
    }
  },
  created() {
    const id = sessionStorage.getItem('handleEdit');
    if (id && id.length > 1) {
      this.disabled = true;
    } else {
      getMdseType({ level: '1' }).then(res => {
        this.simpleInfoList.typeCheck1 = res.data;
      });
    }
  },
  methods: {
    // 分类获取
    typeCheck_one() {
      this.simpleInfoList.type.typeCheck2 = '';
      this.simpleInfoList.type.typeCheck3 = '';
      this.$emit('getTpyeChecked', this.simpleInfoList.type.typeCheck3);
      getMdseType({ parentId: this.simpleInfoList.type.typeCheck1 }).then(
        res => {
          res.data.shift();
          this.simpleInfoList.typeCheck2 = res.data;
        }
      );
    },
    typeCheck_two() {
      this.simpleInfoList.type.typeCheck3 = '';
      this.$emit('getTpyeChecked', this.simpleInfoList.type.typeCheck3);
      getMdseType({ parentId: this.simpleInfoList.type.typeCheck2 }).then(
        res => {
          res.data.shift();
          this.simpleInfoList.typeCheck3 = res.data;
        }
      );
    },
    typeCheck_three() {
      const param = {
        shopId: this.shopInfo.id,
        typeId: this.simpleInfoList.type.typeCheck3
      };
      this.$emit('getTpyeChecked', this.simpleInfoList.type.typeCheck3);
      if (!this.simpleInfoList.type.typeCheck3) return;
      getProperty(param).then(res => {
        this.$emit('listenEven', res);
      });
      this.changeDataAndSend();
    },
    // 验证商品名字
    verificationGoods(name) {
      if (this.name === this.simpleInfoList.name) {
        this.nameFlag = true;
        this.changeDataAndSend();
      } else {
        if (name !== '') {
          getMdsenamerepeat({ name }).then(res => {
            this.nameFlag = true;
            this.changeDataAndSend();
          })
            .catch(res => {
              if (res.code !== '0000') {
                this.simpleInfoList.name = this.name;
                this.$emit('getSimpleInfo', -1);
                this.nameFlag = false;
              }
            });
        } else {
          this.nameFlag = false;
          this.$emit('getSimpleInfo', -1);
          this.$message.error('商品名字不能为空！');
        }
      }
    },
    sendData() {
      this.changeDataAndSend();
    },
    // 数据修改并传递
    changeDataAndSend() {
      const objContent = {};
      const simple = this.simpleInfoList;
      objContent.type = simple.type;
      objContent.name = simple.name;
      objContent.shopParameterLeft = simple.shopParameterLeft;
      objContent.shopParameterRight = simple.shopParameterRight;
      objContent.typeCheck3 = this.simpleInfoList.type.typeCheck3;
      if (
        simple.type.typeCheck3 &&
        simple.name &&
        simple.shopParameterLeft[0].value &&
        simple.shopParameterLeft[1].value &&
        simple.shopParameterLeft[2].value &&
        simple.shopParameterRight[0].value &&
        simple.shopParameterRight[1].value &&
        simple.shopParameterRight[2].value
      ) {
        if (this.nameFlag) {
          this.$emit('getSimpleInfo', objContent);
        } else {
          this.$emit('getSimpleInfo', -2);
        }
      } else {
        this.$emit('getSimpleInfo', -1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.gslt-simpleinfo {
  .simpleinfo-content {
    padding: 40px 0 15px 20%;
    & > div {
      width: 760px;
      font-size: 14px;
      .el-form {
        .shop-parameter {
          display: flex;
          padding: 30px 40px 30px 30px;
          margin-top: 10px;
          justify-content: space-between;
          align-items: center;
          width: 680px;
          height: 207px;
          background: rgba(249, 251, 252, 1);
          border: 1px solid rgba(228, 233, 239, 1);
          box-sizing: border-box;
          /deep/.el-form-item {
            height: 36px;
            margin-top: 18px;
            &:nth-child(1),
            &:nth-child(4) {
              margin: 0;
            }
          }
          /deep/.el-input__inner {
            width: 200px;
            height: 36px;
            box-sizing: border-box;
          }
        }
        /deep/.el-form-item__label {
          color: #3c4353 !important;
          padding: 0;
        }
        .el-select {
          margin-left: 4px;
          width: 220px;
          height: 36px;
          box-sizing: border-box;
          &:nth-child(1) {
            margin-left: 0px;
          }
        }
      }
    }
  }
}
/deep/.el-input__inner {
  color: #a8abb8 !important;
  height: 36px;
}
</style>
